import { Link } from 'react-router-dom';
import { ShoppingCart, User } from 'lucide-react';
import { useQuery } from '@tanstack/react-query';
import { cartApi } from '../api/cart';

export function Header() {
  const { data: cart } = useQuery({
    queryKey: ['cart'],
    queryFn: () => cartApi.getCart().then(res => res.data),
  });

  const cartItemCount = cart?.items?.length || 0;

  return (
    <header className="bg-white shadow-sm">
      <div className="container mx-auto px-4 py-4">
        <div className="flex items-center justify-between">
          <Link to="/" className="text-xl font-bold text-blue-600">
            在线学习平台
          </Link>
          
          <nav className="flex items-center space-x-6">
            <Link to="/courses" className="text-gray-700 hover:text-blue-600">
              课程
            </Link>
            <Link to="/leaderboard" className="text-gray-700 hover:text-blue-600">
              排行榜
            </Link>
            
            <div className="flex items-center space-x-4">
              <Link to="/cart" className="relative text-gray-700 hover:text-blue-600">
                <ShoppingCart size={24} />
                {cartItemCount > 0 && (
                  <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                    {cartItemCount}
                  </span>
                )}
              </Link>
              <Link to="/profile" className="text-gray-700 hover:text-blue-600">
                <User size={24} />
              </Link>
            </div>
          </nav>
        </div>
      </div>
    </header>
  );
}